<template>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		append-to-body
		:show-close="true"
		fullscreen
		:close-on-press-escape="false"
		:close-on-click-modal="true"
		custom-class="pagePopView"
		:before-close="handleClose"
	>
		<div class="inner">
			<!-- <iframe :src="form.url"  width="100%" height="600px" ></iframe> -->
			<!-- <iframe :src="`https://docs.google.com/viewer?url=https://yobu-cloud.oss-cn-beijing.aliyuncs.com/report/Java开发手册（嵩山版）_20250805_1952722714405912576.pdf&embedded=true`" width="100%" height="600px"></iframe> -->
			<PdfViewer :pdfUrl="form.url" />
			<div v-if="loading">Loading...</div>
		</div>
	</el-dialog>
</template>

<script>
import elDragDialog from '@/directives/el-drag-dialog'; // base on element-ui
import PdfViewer from '@/components/common/PdfViewer.vue'; // 导入PDF查看器组件
export default {
	components: { PdfViewer },
	props: {
		title: {
			type: String,
			default: 'pdf预览'
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'pagePopView',
	data() {
		return {
			dialogVisible: false,
			sub_load: false,
			loading: false,
			userinfo: this.info,
			form: {}
		};
	},
	computed: {},
	watch: {
		info: {
			handler(val) {
				this.userinfo = {
					...val
				};
			},
			immediate: true
		}
	},
	created() {},
	methods: {
		init(data) {
			this.dialogVisible = true;
			if (data) {
				console.log({ ...data }, '----data');
				this.form = { ...data };
			}
			this.$nextTick(() => {});
		},

		onSubmit(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
				}
			});
		},
		handleClose() {
			this.$emit('change');
			this.$emit('handleClose');
			this.form = {};
			this.dialogVisible = false;
		}
	},
	directives: { elDragDialog }
};
</script>

<style lang="less">
.pagePopView {
	width: 100% !important;
	border-radius: 0;
	overflow: hidden;
	.el-dialog__header {
		// .bor();
		position: sticky;
		top: 0;
		background: #fff;
		// border-bottom: 1px solid #ccc;
		.el-dialog__headerbtn {
			border: 2px solid #000;
			border-radius: 4px;
			.el-dialog__close {
				font-size: 38px;
				color: #000;
				font-weight: 600;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
		// max-height: 70vh;
		overflow-y: auto;
	}
	.inner {
		width: 100%;
		// padding: 40px;
		// height: 80vh;
		
	}
}
</style>
